<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>元素周期表</title>
	</head>
	<style>
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		.element-top {
			width: 80rem;
			margin: 4rem auto;
			display: flex;
			justify-content: center;
			align-items: flex-end;
		}

		.element-bottom {
			width: 80rem;
			margin: 1rem auto;
		}

		.column {
			width: 4rem;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			margin: 0rem 0.2rem;
		}

		.base-element {
			width: 4rem;
			height: 4rem;
			font-size: 30px;
			font-weight: bolder;
			line-height: 3.5rem;
			text-align: center;
			cursor: pointer;
		}

		.column-element {
			margin-top: 0.2rem;
		}

		.line {
			width: 100%;
			height: 4rem;
			margin: 2rem auto;
			display: flex;
			justify-content: center;
		}

		.line-element {
			margin: 0rem 0.2rem;
		}

		.base-color {
			background: rgb(0, 43, 52);
			color: rgb(119, 232, 255);
			border: 4px solid rgb(119, 232, 255);
		}

		.color-1 {
			background: rgb(52, 0, 9);
			color: rgb(255, 119, 142);
			border: 4px solid rgb(255, 119, 142);
		}

		.color-2 {
			background: rgb(52, 16, 0);
			color: rgb(255, 161, 119);
			border: 4px solid rgb(255, 161, 119);
		}

		.color-3 {
			background: rgb(45, 52, 0);
			color: rgb(236, 255, 119);
			border: 4px solid rgb(236, 255, 119);
		}

		.color-4 {
			background: rgb(0, 52, 14);
			color: rgb(119, 255, 155);
			border: 4px solid rgb(119, 255, 155);
		}

		.color-5 {
			background: rgb(0, 37, 52);
			color: rgb(140, 119, 255);
			border: 4px solid rgb(140, 119, 255);
		}

		.color-6 {
			background: rgb(42, 0, 52);
			color: rgb(235, 120, 255);
			border: 4px solid rgb(235, 120, 255);
		}

		.color-7 {
			background: rgb(217, 217, 217);
			color: rgb(127, 127, 127);
			border: 4px solid rgb(127, 127, 127);
		}

		.color-8 {
			background: rgb(52, 25, 0);
			color: rgb(255, 184, 119);
			border: 4px solid rgb(255, 184, 119);
		}

		.color-9 {
			background: rgb(52, 37, 0);
			color: rgb(255, 216, 119);
			border: 4px solid rgb(255, 216, 119);
		}

		.font-sm {
			font-size: 25px;
		}

		.bg {
			width: 100%;
			height: 100%;
			background: url("./bg.jpg");
			background-size: 100%;
			background-position: center;
			position: fixed;
			z-index: -1;
			top: 0;
			left: 0;
			filter: blur(7px);
		}

		.base-element:hover {
			animation: element-hover 1s 0.2s;
			animation-fill-mode: forwards;
		}

		@keyframes element-hover {
			0% {
				transform: scale(1.0) rotateX(0deg) skewX(0deg);
			}

			50% {
				transform: scale(0.8) rotateX(270deg) skewX(90deg);
			}

			100% {
				transform: scale(1.8) rotateX(720deg) skewX(180deg);
			}
		}
	</style>
	<body>
		<div class="element-top">
			<div class="column">
				<div class="base-element column-element base-color">H</div>
				<div class="base-element column-element color-1">Li</div>
				<div class="base-element column-element color-1">Na</div>
				<div class="base-element column-element color-1">Ka</div>
				<div class="base-element column-element color-1">Rb</div>
				<div class="base-element column-element color-1">Cs</div>
				<div class="base-element column-element color-1">Fr</div>
			</div>
			<div class="column">
				<div class="base-element column-element color-2">Be</div>
				<div class="base-element column-element color-2">Mg</div>
				<div class="base-element column-element color-2">Ca</div>
				<div class="base-element column-element color-2">Sr</div>
				<div class="base-element column-element color-2">Ba</div>
				<div class="base-element column-element color-2">Ra</div>
			</div>
			<div class="column">
				<div class="base-element column-element color-3">Sc</div>
				<div class="base-element column-element color-3">Y</div>
				<div class="base-element column-element color-3">La</div>
				<div class="base-element column-element color-3">Ac</div>
			</div>
			<div class="column">
				<div class="base-element column-element color-3">Ti</div>
				<div class="base-element column-element color-3">Zr</div>
				<div class="base-element column-element color-3">Hf</div>
				<div class="base-element column-element color-3">Rf</div>
			</div>
			<div class="column">
				<div class="base-element column-element color-3">V</div>
				<div class="base-element column-element color-3">Nb</div>
				<div class="base-element column-element color-3">Ta</div>
				<div class="base-element column-element color-3">Db</div>
			</div>
			<div class="column">
				<div class="base-element column-element color-3">Cr</div>
				<div class="base-element column-element color-3">Mo</div>
				<div class="base-element column-element color-3">W</div>
				<div class="base-element column-element color-3">Sg</div>
			</div>
			<div class="column">
				<div class="base-element column-element color-3">Mn</div>
				<div class="base-element column-element color-3">Tc</div>
				<div class="base-element column-element color-3">Re</div>
				<div class="base-element column-element color-3">Bh</div>
			</div>
			<div class="column">
				<div class="base-element column-element color-3">Fe</div>
				<div class="base-element column-element color-3">Ru</div>
				<div class="base-element column-element color-3">Os</div>
				<div class="base-element column-element color-3">Hs</div>
			</div>
			<div class="column">
				<div class="base-element column-element color-3">Co</div>
				<div class="base-element column-element color-3">Rh</div>
				<div class="base-element column-element color-3">Lr</div>
				<div class="base-element column-element color-3">Mt</div>
			</div>
			<div class="column">
				<div class="base-element column-element color-3">Ni</div>
				<div class="base-element column-element color-3">Pd</div>
				<div class="base-element column-element color-3">Pt</div>
				<div class="base-element column-element color-3">Ds</div>
			</div>
			<div class="column">
				<div class="base-element column-element color-3">Cu</div>
				<div class="base-element column-element color-3">Ag</div>
				<div class="base-element column-element color-3">Au</div>
				<div class="base-element column-element color-3">Rg</div>
			</div>
			<div class="column">
				<div class="base-element column-element color-3">Zn</div>
				<div class="base-element column-element color-3">Cd</div>
				<div class="base-element column-element color-3">Hg</div>
				<div class="base-element column-element color-3 font-sm">Uub</div>
			</div>
			<div class="column">
				<div class="base-element column-element color-4">B</div>
				<div class="base-element column-element color-4">Al</div>
				<div class="base-element column-element color-4">Ga</div>
				<div class="base-element column-element color-4">Ln</div>
				<div class="base-element column-element color-4">Tl</div>
				<div class="base-element column-element color-4 font-sm">Uut</div>
			</div>
			<div class="column">
				<div class="base-element column-element base-color">C</div>
				<div class="base-element column-element color-4">Si</div>
				<div class="base-element column-element color-4">Ge</div>
				<div class="base-element column-element color-4">Sn</div>
				<div class="base-element column-element color-4">Pb</div>
				<div class="base-element column-element color-4 font-sm">Uuq</div>
			</div>
			<div class="column">
				<div class="base-element column-element base-color">N</div>
				<div class="base-element column-element base-color">P</div>
				<div class="base-element column-element color-4">As</div>
				<div class="base-element column-element color-4">Sb</div>
				<div class="base-element column-element color-4">Bi</div>
				<div class="base-element column-element color-4 font-sm">Uup</div>
			</div>
			<div class="column">
				<div class="base-element column-element base-color">O</div>
				<div class="base-element column-element base-color">S</div>
				<div class="base-element column-element base-color">Se</div>
				<div class="base-element column-element color-4">Te</div>
				<div class="base-element column-element color-4">Po</div>
				<div class="base-element column-element color-4 font-sm">Uuh</div>
			</div>
			<div class="column">
				<div class="base-element column-element color-5">F</div>
				<div class="base-element column-element color-5">Cl</div>
				<div class="base-element column-element color-5">Br</div>
				<div class="base-element column-element color-5">I</div>
				<div class="base-element column-element color-5">At</div>
				<div class="base-element column-element color-7 font-sm">Uus</div>
			</div>
			<div class="column">
				<div class="base-element column-element color-6">He</div>
				<div class="base-element column-element color-6">Ne</div>
				<div class="base-element column-element color-6">Ar</div>
				<div class="base-element column-element color-6">Kr</div>
				<div class="base-element column-element color-6">Xe</div>
				<div class="base-element column-element color-6">Rn</div>
				<div class="base-element column-element color-6 font-sm">Uuo</div>
			</div>
		</div>

		<div class="element-bottom">
			<div class="line">
				<div class="base-element line-element color-8">La</div>
				<div class="base-element line-element color-8">Ce</div>
				<div class="base-element line-element color-8">Pr</div>
				<div class="base-element line-element color-8">Nd</div>
				<div class="base-element line-element color-8">Pm</div>
				<div class="base-element line-element color-8">Sm</div>
				<div class="base-element line-element color-8">Eu</div>
				<div class="base-element line-element color-8">Gd</div>
				<div class="base-element line-element color-8">Tb</div>
				<div class="base-element line-element color-8">Dy</div>
				<div class="base-element line-element color-8">Ho</div>
				<div class="base-element line-element color-8">Tm</div>
				<div class="base-element line-element color-8">Yb</div>
				<div class="base-element line-element color-8">Lu</div>
			</div>
			<div class="line">
				<div class="base-element line-element color-9">Ac</div>
				<div class="base-element line-element color-9">Th</div>
				<div class="base-element line-element color-9">Pa</div>
				<div class="base-element line-element color-9">U</div>
				<div class="base-element line-element color-9">Np</div>
				<div class="base-element line-element color-9">Pu</div>
				<div class="base-element line-element color-9">Am</div>
				<div class="base-element line-element color-9">Cm</div>
				<div class="base-element line-element color-9">Bk</div>
				<div class="base-element line-element color-9">Cf</div>
				<div class="base-element line-element color-9">Es</div>
				<div class="base-element line-element color-9">Mc</div>
				<div class="base-element line-element color-9">No</div>
				<div class="base-element line-element color-9">Lr</div>
			</div>
		</div>

		<div class="bg"></div>

	</body>
</html>
